<template>
  <div class="mainSearch" id="mainSearch">
    <div :class="['serBox',serBoxNum==2&&'open2',serBoxNum==3&&'open3']">
      <div class="option keyword" @click.stop="showKws()">
        <div class="inner">
          <label class="placeholder" v-if="!showInp">키워드입력<small>(제목,산업/업종,직업/직종,기업이름등)</small></label>
          <input type="text" v-model="searchParams.frm.keyword" ref="kws" class="kws" v-show="showInp" @blur="checkKws">
        </div>
        <i v-if="searchParams.frm.keyword" @click.stop="clearKws" class="el-icon-circle-close"></i> 
      </div>
      <div class="option area" @click.stop="openSerMore(2)">
        <div class="inner">
          <label class="placeholder" v-if="!searchParams.other.areaTxt">지역선택</label>
          <span class="filter" v-else>{{searchParams.other.areaTxt}}</span>
        </div>
        <i v-if="searchParams.other.areaTxt" @click.stop="clearArea" class="el-icon-circle-close"></i> 
      </div>
      <div class="option category" @click.stop="openSerMore(3)">
        <div class="inner">
          <label class="placeholder" v-if="!searchParams.other.jobTxt">직업 선택</label>
          <span class="filter" v-else>{{searchParams.other.jobTxt}}</span>          
        </div>
        <i v-if="searchParams.other.jobTxt" @click.stop="clearJob" class="el-icon-circle-close"></i> 
      </div>
      <div class="btnSer">
        <el-button type="primary" @click="search">검색</el-button>
      </div>
      <div class="panel" v-show="serBoxNum==2">
          <el-cascader-panel ref="areaPanel" :options="areaList" v-model="searchParams.other.areaValue" @change="areaChange"></el-cascader-panel>
      </div>
      <div class="panel" v-show="serBoxNum==3">
          <el-cascader-panel ref="jobPanel" :options="jobList" v-model="searchParams.other.jobValue" @change="jobChange"></el-cascader-panel>
      </div>    
    </div>
    <div class="other">
      <div :class="['tit',otherOpen&&'open']" @click="otherOpen=!otherOpen">상세검색<i class="arrow"></i></div>
      <div class="list" v-show="otherOpen">
        <ul v-if="pageType=='job'">
          <li v-if="employeeList.length">
            <span>고용형태</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in employeeList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.employeeSearch"><i></i></label>
            </div>
          </li>
          <li v-if="careerList.length">
            <span>경력선택</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in careerList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.careerSearch"><i></i></label>
            </div>
          </li>
          <li v-if="salaryList.length">
            <span>연봉선택</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in salaryList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.salarySearch"><i></i></label>
            </div>
          </li>
          <li v-if="sourceList.length">
            <span>출처</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in sourceList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.sourceSearch"><i></i></label>
            </div>
          </li>
        </ul>
        <ul v-else>
          <li v-if="yearList.length">
            <span>경력선택</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in yearList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.workYearsSearch"><i></i></label>
            </div>
          </li>
          <li v-if="ageList.length">
            <span>나이선택</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in ageList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.ageSearch"><i></i></label>
            </div>
          </li>
          <li v-if="sexList.length">
            <span>성별선택</span>
            <div class="ops">
              <label class="chx" v-for="(item,index) in sexList" :key="index">{{item.value}}<input type="checkbox" :value="item.id" v-model="searchParams.frm.sexSearch"><i></i></label>
            </div>
          </li>
        </ul>
        <div class="searClose" @click="otherOpen=false">접기</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Local, removeNull } from "@/utils";
import { 
  jobOption, 
  areaList, 
  employeeSearch, 
  careerSearch, 
  salarySearch, 
  integratedSourceSearch,
  getWorkYearsSearch,
  getAgeSearch,
  getSexSearch
} from '@/api';

export default {
  name:'searchBox',
  components:{},
  data(){
    return {
      pageType:null,
      serBoxNum:0,
      otherOpen:false,
      showInp:false,
      employeeList:[],
      salaryList:[],
      careerList:[],
      sourceList:[],
      yearList:[],
      ageList:[],
      sexList:[],
      jobList:[],
      areaList:[],
      searchParams:{
        frm:{
          keyword:'',
          job1:'',
          job2:'',
          job3:'',
          area1_id:'',
          area2_id:'',
          area3_id:'',
          employeeSearch:[],
          careerSearch:[],
          salarySearch:[],
          sourceSearch:[],
          workYearsSearch:[],
          ageSearch:[],
          sexSearch:[]
        },
        other:{
          jobValue:'',
          jobTxt:'',
          areaValue:'',
          areaTxt:'',          
        }
      }
    }
  },
  props:['type'],
  computed:{
  },
  created(){
    let serData=(this.type=='recruitSearch'?Local.get('rec_ser_data'):Local.get('job_ser_data'));
    if(serData){
      serData.frm.keyword&&(this.showInp=true);
      this.searchParams=serData;
      // console.log(this.searchParams)
    }
    if(this.type=='jobIndex'||this.type=='jobSearch'){
      this.pageType='job';
      this.getEmployee()
      this.getSalary()
      this.getCareer()
      this.getSource()
    }else{
      this.pageType='cv';
      this.getWorkYearsSearch();
      this.getAgeSearch();
      this.getSexSearch();
    }
    this.getJobOption()
    this.getAreaList()
  },
  mounted(){
    var $el = document.getElementById("mainSearch");
    document.addEventListener('click',e=>{
        if(!$el.contains(e.target)){
            this.serBoxNum=0
        }
    })
  },
  methods:{
    async getWorkYearsSearch(){
      let res = await getWorkYearsSearch();
      if(res.code==200){
          this.yearList=res.data;
      }
    },
    async getAgeSearch(){
      let res = await getAgeSearch();
      if(res.code==200){
          this.ageList=res.data;
      }
    },
    async getSexSearch(){
      let res = await getSexSearch();
      if(res.code==200){
          this.sexList=res.data;
      }
    },         
    async getJobOption(){
      let res = await jobOption({type:1,pid:0});
      if(res.code==200){
        this.jobList=this.formatData(res.data,'all_sub_jobs');
      }
    },
    async getAreaList(){
      let res = await areaList({type:1,pid:0});
      if(res.code==200){            
          this.areaList=this.formatData(res.data,'all_sub_areas');
      }
    },
    async getEmployee(){
      let res = await employeeSearch();
      if(res.code==200){
          this.employeeList=res.data;
      }
    },
    async getSalary(){
      let res = await salarySearch();
      if(res.code==200){
          this.salaryList=res.data;
      }
    },
    async getCareer(){
      let res = await careerSearch();
      if(res.code==200){
          this.careerList=res.data;
      }
    },
    async getSource(){
      let res = await integratedSourceSearch();
      if(res.code==200){
          this.sourceList=res.data;
      }
    },
    clearKws(){
      this.searchParams.frm.keyword='';
    },
    areaChange(){
      let nodesObj = this.$refs['areaPanel'].getCheckedNodes();
      if(nodesObj.length){
        let _arry=nodesObj[0].pathLabels,str='';
        if(_arry.length){
          _arry.forEach((item,index)=>{
            str+=item+ ((index!=_arry.length-1)?' > ':'')
          })
        }
        this.searchParams.other.areaTxt=str;
        this.searchParams.frm.area1_id=this.searchParams.other.areaValue[0];
        this.searchParams.frm.area2_id=this.searchParams.other.areaValue[1];
        this.searchParams.other.areaValue.length>2&&(this.searchParams.frm.area3_id=this.searchParams.other.areaValue[2]);
        this.serBoxNum=0;
      }else{
        this.searchParams.other.areaTxt='';
        this.searchParams.frm.area1_id='';
        this.searchParams.frm.area2_id='';
        this.searchParams.frm.area3_id='';
      }
    },
    clearArea(){
      this.$refs['areaPanel'].clearCheckedNodes();
      this.searchParams.frm.area1_id='';
      this.searchParams.frm.area2_id='';
      this.searchParams.frm.area3_id='';
    },
    jobChange(){
      let nodesObj = this.$refs['jobPanel'].getCheckedNodes();
      if(nodesObj.length){
        let _arry=nodesObj[0].pathLabels,str='';
        if(_arry.length){
          _arry.forEach((item,index)=>{
            str+=item+ ((index!=_arry.length-1)?' > ':'')
          })
        }
        this.searchParams.other.jobTxt=str;
        this.searchParams.frm.job1=this.searchParams.other.jobValue[0];
        this.searchParams.frm.job2=this.searchParams.other.jobValue[1];
        this.searchParams.other.jobValue.length>2&&(this.searchParams.frm.job3=this.searchParams.other.jobValue[2]);
        this.serBoxNum=0;
      }else{
        this.searchParams.other.jobTxt='';
        this.searchParams.frm.job1='';
        this.searchParams.frm.job2='';
        this.searchParams.frm.job3='';        
      }
    },
    clearJob(){
      this.$refs['jobPanel'].clearCheckedNodes();
      this.searchParams.frm.job1='';
      this.searchParams.frm.job2='';
      this.searchParams.frm.job3='';      
    },
    showKws(){
      this.serBoxNum=0;
      this.showInp=true;
      setTimeout(()=>{
        this.$refs.kws.focus()
      },100)      
    },
    checkKws(){
      this.searchParams.frm.keyword==''&&(this.showInp=false)
    },
    openSerMore(n){
      this.serBoxNum=n
    },
    closeSerMore(){
      this.serBoxNum=0
      this.$emit('callBack')
    },
    search(){
      let _new=JSON.parse(JSON.stringify(this.searchParams.frm))
      let _params=removeNull(_new);

      if(Object.keys(_params).length === 0&&(this.type=='recruitIndex'||this.type=='recruitIndex')){
        return false;
      }
      this.otherOpen=false;
      if(this.type=='recruitIndex'||this.type=='recruitSearch'){
        Local.set('rec_ser_data',this.searchParams);
        this.type=='recruitIndex'&&this.$router.push('/recruit/search');
        this.type=='recruitSearch'&&this.$emit('search',_params);
      }else if(this.type=='jobIndex'||this.type=='jobSearch'){
        Local.set('job_ser_data',this.searchParams);
        this.type=='jobIndex'&&this.$router.push('/job/search');
        this.type=='jobSearch'&&this.$emit('search',_params);
      }
    },
    formatData(data,sub){
      let _arry=[]
          data.forEach((o,i)=>{
            let _item={};
                _item.label=o.name;
                _item.value=o.id;
                o[sub].length&&(_item.children=[]);
                o[sub].length&&o[sub].forEach((j,k)=>{
                  let _item2={};
                      _item2.label=j.name;
                      _item2.value=j.id;
                      j[sub].length&&(_item2.children=[]);
                      j[sub].length&&j[sub].forEach((m,n)=>{
                        let _item3={};
                            _item3.label=m.name;
                            _item3.value=m.id;
                            _item2.children.push(_item3)
                      })
                      _item.children.push(_item2)
                })
                _arry.push(_item)
          })
          return _arry
    }
  },
  watch:{
  }
}
</script>